﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>飞羽体育</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    <link href="https://cdn.bootcss.com/amazeui/2.7.2/css/amazeui.css" rel="stylesheet">
    <link href="css/common.css" rel="stylesheet" />
    <style>
        .am-slider-default .am-control-nav{
            bottom:10px;
        }
        .am-slider-a1 .am-control-nav li a{
            background-color: #aeaeae;
        }
        .am-slider-a1 .am-control-nav li a.am-active{
            background-color: #46e0ae;
        }
        .head{
            position: relative;
            width: 100%;
        }
        .head_d1{
            position: absolute;
            top:0;
            left:0;
            background: rgba(0,0,0,0);
            padding: 2% 3%;
        }
        .head_img01{
            width: 35%;
            display: block;
            float: left;
            margin-top: 6%;
        }
        .head_span01{
            display: block;
            float: left;
            margin-right: 2%;
            font-size: 1.6rem;
        }
        .search::-webkit-input-placeholder{
            color:#c8c8c8;
        }
        .am-btn-default:active, .am-btn-default.am-active, .am-dropdown.am-active .am-btn-default.am-dropdown-toggle{
            background: rgba(0,0,0,0);
        }
        .am-selected-btn.am-btn-default{
            padding: 0;
            border: none;
        }
        .am-selected{
            width: 100%;
        }
        .am-selected-status{
            text-align: center;
        }
        .am-selected-icon,.am-icon-caret-down{
            display: none;
        }
        .head_img02{
            width: 60%;
            display: block;
            margin: 0 auto;
        }
        .head_span03{
            font-weight: 500;
            font-size: 1.7rem;
        }
        .line{
            border:3px solid #f6f6f6;
        }
        .main{
            width: 100%;
        }
        .newactivty{
            width: 100%;
            overflow: hidden;
            padding: 3% 0;
        }
        .newacty_d1{
            width: 100%;
            position: relative;
            padding-right: 3%;
            overflow: hidden;
            border-bottom: 1px solid #f2f2f2;
            padding-bottom: 2%;
        }
        .newactyd1_d1{
            position: absolute;
            right: 3%;
            top: 10%;
        }
        .newacty_sp1{
            display: block;
            padding: 1% 8%;
            text-align: right;
            background: linear-gradient(to right, #ff68a1,#ff3c74);
            float: left;
            border-radius: 50px;
            color: #fff;
            padding-left: 15%;
            margin-left: -13%;
        }
        .newacty_d2{
            padding: 2% 4%;
        }
        .newactyd1_d1{
            overflow: hidden;
            border-radius: 5px;
        }
        .newactyd2_img01{
            width: 100%;
        }
        .am-list-news-default .am-list .am-list-item-desced .am-list-item-text{
            margin-top: 0.2rem;
        }
        .am-list > li{
            border-top:none;
            border-bottom: 1px solid #dedede;
        }
        .match{
            position: relative;
            width:100%;
        }
        .match_d1{
            width: 100%;
            overflow: hidden;
            margin-bottom: 3%;
            position: relative;
        }
        .matchd1_img01{
            width: 100%;
            display: block;
        }
    </style>
</head>
<body>
    <div class="page" id="page" v-cloak>
        <div class="head">
            <div data-am-widget="slider" class="am-slider am-slider-a1" data-am-slider='{"directionNav":false}'>
                <ul class="am-slides">
                    <li>
                        <img src="images/indexbanner.png">
                    </li>
                    <li>
                        <img src="images/indexbanner.png">
                    </li>
                    <li>
                        <img src="images/indexbanner.png">
                    </li>
                    <li>
                        <img src="images/indexbanner.png">
                    </li>
                </ul>
            </div>

            <div class="am-g head_d1">
                <div class="am-u-sm-2" style="padding: 0;margin-top: 0.8%;">
                    <select data-am-selected>
                        <option value="a" selected>无锡</option>
                        <option value="b">Banana</option>
                        <option value="o">Orange</option>
                        <option value="m">Mango</option>
                    </select>
                </div>
                <div class="am-u-sm-8">
                    <div class="am-form-group am-form-icon am-form-feedback" style="margin: 0;">
                        <form action="">
                            <input type="search" class="am-form-field search" placeholder="输入场馆名称、地址" style="padding: 3%;border-radius: 50px;padding-left: 7% !important;background: #f2f2f2">
                            <span class="am-icon-search" style="right: 1.5rem;"></span>
                        </form>
                    </div>
                </div>
                <div class="am-u-sm-2" style="margin-top: 1.2%;">
                    <img src="images/index_01.png" alt="" style="width: 70%;display: block;margin: 0 auto;">
                </div>
            </div>
            <div class="head_d2 am-g" style="margin-top: 2%;">
                <a href="venue.html?sportindex=2" style="color:black;">
                    <div class="am-u-sm-3" style="text-align: center;margin: 3% 0"><img src="images/index_02.png" alt="" class="head_img02"><span class="head_span03">足球</span></div>
                </a>
                <a href="venue.html?sportindex=3" style="color:black;">
                    <div class="am-u-sm-3" style="text-align: center;margin: 3% 0"><img src="images/index_04.png" alt="" class="head_img02"><span class="head_span03">篮球</span></div>
                </a>
                <a href="venue.html?sportindex=1" style="color:black;">
                    <div class="am-u-sm-3" style="text-align: center;margin: 3% 0"><img src="images/index_05.png" alt="" class="head_img02"><span class="head_span03">羽毛球</span></div>
                </a>
                <a href="venue.html?sportindex=0" style="color:black;">
                    <div class="am-u-sm-3" style="text-align: center;margin: 3% 0"><img src="images/index_06.png" alt="" class="head_img02"><span class="head_span03">更多</span></div>
                </a>
                <a href="javascript:alert('开发中')" style="color:black;">
                    <div class="am-u-sm-3" style="text-align: center;margin: 3% 0"><img src="images/index_07.png" alt="" class="head_img02"><span class="head_span03">找教练</span></div>
                </a>
                <a href="javascript:alert('开发中')" style="color:black;">
                    <div class="am-u-sm-3" style="text-align: center;margin: 3% 0"><img src="images/index_08.png" alt="" class="head_img02"><span class="head_span03">找裁判</span></div>
                </a>
                <a href="Match.html" style="color:black;">
                    <div class="am-u-sm-3" style="text-align: center;margin: 3% 0"><img src="images/index_09.png" alt="" class="head_img02"><span class="head_span03">活动</span></div>
                </a>
                <a href="Match.html" style="color:black;">
                    <div class="am-u-sm-3" style="text-align: center;margin: 3% 0"><img src="images/index_10.png" alt="" class="head_img02"><span class="head_span03">赛事</span></div>
                </a>
            </div>
        </div>
        <div class="line"></div>
        <div class="main">
            <div class="newactivty" style="padding-bottom: 0">
                <div class="newacty_d1">
                    <span class="newacty_sp1">近期活动</span>
                    <div class="newactyd1_d1">
                        <a style="color: #9d9d9d;" href="Activity.html"><span style="margin-right: 5%">更多</span><span class="am-icon am-icon-angle-right"></span></a>
                    </div>
                </div>
                <div data-am-widget="list_news" style="margin-bottom: 0" class="am-list-news am-list-news-default am-no-layout">
                    <div class="am-list-news-bd">
                        <ul class="am-list" style="margin-bottom: 0">
                            <li style="border-top:none;" class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-left" v-for="list in ActList" v-on:click="Actclick(list.o.gId)">
                                <div class="am-u-sm-4 am-list-thumb">
                                    <img v-bind:src="list.o.faceImg">
                                </div>
                                <div class=" am-u-sm-8 am-list-main">
                                    <div class="am-list-item-hd" style="    font-size: 1.4rem;">{{list.o.Name}}</div>
                                    <div class="am-list-item-text">发起人：{{list.org.Name}}</div>
                                    <div class="am-list-item-text">活动时间：{{list.startTime}}-{{list.endTime}}</div>
                                    <div class="am-list-item-text">
                                        <span class="am-badge am-round" style="background: inherit;color: #0bc886;border:1px solid #0bc886 ;">{{list.o.Tags}}</span>
                                        <span style="color: #ffa44f;">  {{list.money>0?"付费":"免费"}}</span>
                                    </div>
                                    <div class="am-list-item-text" style="float: right;margin-top: -32%">
                                        <span class="am-badge am-radius" style="background: inherit;color: #9d9d9d;border:1px solid #9d9d9d ;">
                                        
                                        {{list.state}}</span>
                                    </div>
                                    <div class="am-list-item-text" style="float: right;margin-top: -8%">
                                        {{list.count}}人报名
                                    </div>
                                </div>
                            </li>

                        </ul>
                    </div>
                </div>
            </div>
            <div class="line"></div>
            <div class="line"></div>
            <div class="line"></div>
            <div class="line"></div>
            <div class="line"></div>
            <span class="newacty_sp1" style="background: linear-gradient(to right, #15b9f9,#0695fc);    margin-top: -5%;">周边赛事</span>
            <div class="match">

                <div class="match_d1" v-for="list in MatList" v-on:click="Matclick(list.o.gId)">
                    <img v-bind:src="list.o.faceImg" alt="" class="matchd1_img01">
                    <span style="padding: 1% 4%;color: #fff;background: #787878;font-size: 1.7rem;border-radius: 50px;position: absolute;bottom: 3%;left: 3%">已结束</span>
                    <div style="    width: 50%;border-radius: 20px;background: rgba(0,0,0,.6); padding-top: 0%;padding-left: 2%; padding-bottom: 5%; color: #fff;  position: absolute; top: 90%; right: -5%;">
                        {{list.startTime}}-{{list.endTime}}
                    </div>
                </div>

            </div>
            <div class="am-list-news-ft" style="padding-bottom:15px;">
                <a class="am-list-news-more" style="color: #444;" href="Match.html">查看更多 &raquo;</a>
            </div>
        </div>
    </div>

    <div data-am-widget="navbar" class="am-navbar am-cf am-navbar-default am-no-layout bottomdiv" style="border-top:1px solid #dedede">
        <ul class="am-navbar-nav am-cf am-avg-sm-4" style="background-color:#ffffff;">
            <li>
                <a href="javascript:void(0)" class="" style="color:#0BC886">
                    <span class="fa  am-icon-home  am-icon-sm"></span>
                    <span class="am-navbar-label">首页</span>
                </a>
            </li>
            <li>
                <a href="venue.html" class="" style="color: #757575">
                    <span class="fa fa-futbol-o am-icon-sm"></span>
                    <span class="am-navbar-label">找场地</span>
                </a>
            </li>
            <li>
                <a href="usercenter.html" class="" style="color:#757575;">
                    <span class="fa fa-user am-icon-sm"></span>
                    <span class="am-navbar-label">我的</span>
                </a>
            </li>
        </ul>
    </div>
</body>
<script src="https://use.fontawesome.com/ca6b609d64.js"></script>
<script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.js"></script>
<script src="js/common.js"></script>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.js"></script>
<script src="https://cdn.bootcss.com/amazeui/2.7.2/js/amazeui.js"></script>
</html>

<script>
    var page = new Vue({
        el: '#page',
        data: {
            keyword: '',
            ActList: [],
            MatList: []
        },
        methods: {
            getInfo: function () {
                var that = this;
                $.ajax({
                    type: 'GET',
                    url: apiUrl + '/Api/Data/GetActMat',
                    success: function (data) {
                        console.log(data);
                        if (data.errcode == 0) {
                            that.ActList = data.data.Act;
                            that.MatList = data.data.Mat;
                        } else {
                            
                            alert(data.errmsg);
                        }
                    },
                    //error: function () {
                    //    alert("服务器加载异常");
                    //}
                })
            },
            Actclick: function (gid) {
                location.href = "ActivityInfo.html?gId=" + gid;
            },
            Matclick: function (gid) {
                location.href = "MatchInfo.html?gId=" + gid;
            },
        }
    })
    $(function () {
        page.getInfo();
    })
</script>